<template>
    <!--自定义查询区域-->
    <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <!--a-col flex="135px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag v-model:value="queryParam.ddlxIds" mode="multiple" :maxTagCount="0" dictCode="ddlxType@ddlxUser" placeholder="全部" :autofocus="false" @change="ddlxSelect" />
          </a-form-item>
        </a-col-->
        <a-col flex="150px">
          <a-form-item label="类型" :label-col="{ style: { width: '50px' } }">
            <JDictSelectTag
              v-model:value="queryParam.type"
              dictCode="memberType"
              placeholder="全部"
              :disabled="typeDisabled"
              :maxTagCount="0"
              :getPopupContainer="(node) => node.parentNode"
              :dropdownStyle="{ width: '150px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
            />
          </a-form-item>
        </a-col>
        <a-col flex="140px">
          <a-form-item label="状态" :label-col="{ style: { width: '50px' } }">
            <a-select v-model:value="queryParam.state" placeholder="全部" :showArrow="false" :allowClear="true" :dropdown-match-select-width="90">
              <a-select-option value="0">待审核</a-select-option>
              <a-select-option value="1">已审核</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col flex="200px">
          <a-form-item label="姓名" :label-col="{ style: { width: '50px' } }">
            <a-input v-model:value="queryParam.name" autocomplete="off"/>
          </a-form-item>
        </a-col>
        <a-col flex="200px">
          <a-form-item label="手机号" :label-col="{ style: { width: '60px' } }">
            <a-input v-model:value="queryParam.tel"  autocomplete="off"/>
          </a-form-item>
        </a-col>
        <a-col flex="auto" style="float:right; width:90px; margin-right: 0px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!--引用表格 :rowSelection="rowSelection"-->
  <BasicTable @register="registerTable" :onRowDbClick="handleDblclick" :onRowClick="handleClick" :rowClassName="rowClassName" :loading="loading">
    <!-- 自定义 name 列的显示 -->
    <template #name="{ text, record }">
      <div style="height: 20px; line-height: 20px; position: relative; display: flex; align-items: center; " >
        <a-avatar
          :src="getAvatar(record)"
          :size="20"
          style="background-color: #CCC; margin-right: 5px"
        >
          {{ getAvatarText(record) }}
        </a-avatar>
        <span v-if="record.skrName">{{text}}（{{ record.skrName }}）</span>
        <span v-else>{{text}}</span>
      </div>
    </template>
    <!-- 自定义 tel 列的显示 -->
    <template #tel="{ text, record }">
      <div style="height: 20px; line-height: 20px; position: relative; display: flex; align-items: center; " >
        <Icon
          icon="ant-design:qrcode-outlined"
          size="20"
          :class="record.skrQrcode ? 'text-green-600' : 'text-gray-400'"
          style="margin-right: 5px"
        ></Icon>
        <span>{{ text }}</span>
      </div>
    </template>
    <!--插槽:table标题-->
    <template #tableTitle>
      <a-button type="primary" preIcon="ant-design:export-outlined" @click="editoperation"> 编辑 </a-button>
      <a-button type="primary" color="error" preIcon="ant-design:delete-twotone" @click="handleDelete" :disabled="selectRows.state == '1'"> 删除 </a-button>
      <a-button type="primary" color="success" preIcon="ant-design:alert-outlined" @click="auditoperation('1')" :disabled="selectRows.state == '1' || selectRows.corpName == ''"> 审核 </a-button>
      <a-button type="primary" color="warning" preIcon="ant-design:alert-twotone" @click="auditoperation('0')" :disabled="selectRows.state == '0'"> 取消 </a-button>
    </template>
  </BasicTable>
  <!-- table区域-end v-auth="'business:delete'"-->

  <MemberModal @register="registerMemberModal" @success="searchQuery"></MemberModal>
  <MemberAudit @register="registerMemberAudit" @success="searchQuery"></MemberAudit>
  <MemberArea @register="registerMemberArea" @success="searchQuery"></MemberArea>
</template>

<script lang="ts" setup name="member-index">
import { ref, computed, unref, reactive, toRaw, watch, onMounted } from "vue";
import { Button } from "/@/components/Button";
import { BasicTable } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { treeGrid, list, approvalPc, del } from "./member.api";
import { columns } from "./member.data";
import { momentSearchQueryDate } from "/@/utils/dateUtil";
import { replaceAll } from "/@/utils";
import { useMessage } from "/@/hooks/web/useMessage";
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';

import moment from 'dayjs'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';

import MemberModal from './MemberModal.vue';
import MemberAudit from './modules/MemberAudit.vue';
import MemberArea from './modules/memberArea.vue';

const $message = useMessage();

// 自动请求并暴露内部方法
onMounted(() => {
  //console.info("onMounted@@", moment().valueOf)
});

//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive<any>({
  name: "",
  tel: "",
});

const typeDisabled = ref<boolean>(false);

let selectRows = reactive<any>({id: '', state: ''});

//初始化 -------------------------------------------------------------

function searchQuery() {
  setProps({searchInfo:toRaw(queryParam)});
  reload()
}

function handleSummary(tableData: Recordable[]) {
  const res = getRawDataSource()
  redoHeight();
  if (res) {
    return getRawDataSource().summary;
  } else {
    return [];
  }
}

// 列表页面公共参数、方法
const loading     = ref<boolean>(false);
const dataSource  = ref<any[]>([]);
const summaryData = ref<any[]>([]);
const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
  designScope: 'business-list',
  tableProps: {
    rowKey: '(row) => row.id',
    api: list,
    columns: columns,
    showIndexColumn: true,    //行号
    clickToRowSelect: true,   //点击选择
    showActionColumn: false,
    useSearchForm: false,
    showSummary: true,
    resizeHeightOffset: 0,
    summaryFunc: handleSummary,
    beforeFetch: (params) => {Object.assign(params, unref(queryParam))}, 
  },
})

//注册table数据
const [registerTable, {reload, setProps, getRawDataSource, redoHeight}] = tableContext

//新增订单
const [registerMemberModal, {openModal: openModal}] = useModal();

//审核
const [registerMemberAudit, {openModal: openMemberAuditModal}] = useModal();

//通知
const [registerMemberArea, {openModal: openMemberAreaModal}] = useModal();

/**
 * order 订单新增后回调函数,自动弹出订单编辑窗口
 * @param businessId
 */
function handleSuccess(businessId) {
  reload();
  selectRows.id = '';
}

//单击行
function handleClick(record) {
  selectRows.id = record.id
  selectRows.state = record.state
  selectRows.corpName = record.corpName
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

//双击行
function handleDblclick(record) {
  openMemberAuditModal(true, {isUpdate: true, id: selectRows.id});
}

//编辑功能
function editoperation() {
  openMemberAuditModal(true, {isUpdate: true, id: selectRows.id});
}

//审核功能
function auditoperation(state) {
  var params = {id: selectRows.id, state: state}
  handleMemberAudit(params);
}

//表单提交事件
async function handleMemberAudit(params) {
  try {
    await approvalPc(params).then((res) => {
      console.info(res)
      if (res.success) {
        $message.createMessage.success(res.message);
        searchQuery();
        //关闭弹窗
      } else {
        $message.createMessage.warning(res.message);
      }
    });
  } finally {
    
  }
}

// 获取头像
function getAvatar(item) {
  var face = item.headimgurl;
  if (face) {
    if (face.indexOf("http")>0) {
      return face;
    } 
    return getFileAccessHttpUrl(face)
  }
  return "";
}

// 头像没有获取 用户名前两位
function getAvatarText(item){
  if (item.name) {
    return item.name.substr(0, 1);
  }
  return '';
}

//部门下接框
function ddlxSelect() {
  //有选择操作
  if (queryParam.ddlxIds && queryParam.ddlxIds.length > 0) {
    typeDisabled.value = true;
    queryParam.type = '2';
  } else {
    typeDisabled.value = false;
    queryParam.type = '';
  }
}

/**
 * 删除事件
 */
async function handleDelete() {
  if (!selectRows.id && selectRows.id != null) {
    alert('请选择数据。');
    return;
  }
  await del({id: selectRows.id}, searchQuery);
}

</script>
<style lang="less" scoped>

</style>
